<template>
    <div>
        Contacts
        <div class="contact-list">
            <div :key="index" v-for="(group,index) in contacts" class="contact-group">
                <div class="group-title">
                    {{ group.title }}
                </div>
                <div @click="clickUser(item)" class="group-item" :key="index2" v-for="(item,index2) in group.items">
                    {{ item.userName }}
                </div>
            </div>
        </div>
    </div>


</template>

<script>
import {splitFirstLetter} from "@/utils/utils";

export default {
    name: "ChatContacts",
    data() {
        return {
            contacts: [],
        }
    },
    methods: {
        clickUser() {
            console.log('s')
        },
    },
    mounted() {
        const user = this.$store.getters.getUser
        console.log(this.$store.getters.getUser)
        console.log(user)
        this.$axios.post("/chat/chat/getAllFriend/" + user.id).then(e => {
            var data = e.data.obj
            var c = splitFirstLetter(data);
            console.log(c)
            this.contacts = c

        })
    }
}
</script>

<style scoped>
.contact-list {
    margin-top: 10px;
    height: 465px;
    overflow-y: scroll;
}

.contact-group {
    margin-top: 20px;
}


.group-title {
    background-color: #cfd6f6;
    color: #556ee6;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.group-item {
    display: flex;
    padding-left: 5px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
    border-top: #e9eaee 1px solid;
    transition: all ease-in-out 300ms;
    cursor: pointer;


}

.group-item:hover {

    background-color: white;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}
</style>